<template>
    <view class="pages u-skeleton" :class="GlobalThemes.commonBackGroundClass">
        <view class="search-top-box" id="navbar">
            <u-navbar
                :is-back="false"
                back-icon-color="#ffffff"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
                <view class="slot-wrap"><view class="search-wrap"></view></view>
            </u-navbar>
        </view>
        <view>
            <search-box
                :placeholder="defaultKw"
                :kwList="kwList"
                :hotKwList="hotKwList"
                :isSearching="loading"
                :adSwitchKg="adSwitchKg"
                :oneAd="oneAd"
                :isEnd="isEnd"
                :scrollStyle="scrollStyle"
                @clearkwList="clearkwList"
                @setListByKw="setListByKw"
                @goDetail="goDetail"
                @onreachBottom="onreachBottom"
            >
                >
            </search-box>
        </view>

        <u-tabbar
            id="uTabbar"
            v-model="tarbarObj.tarbarCurrent"
            :list="tarbarObj.tarbarList"
            :border-top="true"
            :mid-button="tarbarObj.midButton"
            bg-color="#fff"
            :inactiveColor="typelist[tabIndex].color"
            :activeColor="tarbarObj.activeColor"
            icon-size="40"
            :height="tarbarObj.height"
            mid-button-size="80"
        ></u-tabbar>
    </view>
</template>

<script>
import SearchBox from '@/components/ay-search/ay-search-list.vue';
import Methods from './methods.js';
export default {
    components: {
        SearchBox,
    },
    ...Methods
};
</script>
<style lang="scss">
.pages {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    .search-top-box {
        .mp-name {
            color: #fff;
            padding-left: 40upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slot-wrap {
            display: flex;
            align-items: center;
            flex: 1;

            .search-wrap {
                flex: 1;
                margin: 0 20upx;
            }
        }
    }
}
</style>
